<script setup lang="ts">
import { getkDataRequest, getsimpleDataRequest, productTongjiRequest, userTongjiRequest } from '@/api/statistic';
import { ref,onMounted } from 'vue'; 
import * as echarts from 'echarts';


const userNum = ref(0)
const userDataLoading = ref(false)
const productNum = ref(0)
const productDataLoading = ref(false)

setInterval(function(){
  userDataLoading.value = true
  setTimeout(()=>{
    userTongjiRequest().then((r)=>{
    userDataLoading.value = false
    // console.log(r.data);
    userNum.value = r.data.data
})
},1000)
},2000)

productDataLoading.value = true
setTimeout(()=>{
  productTongjiRequest().then((r)=>{
  productDataLoading.value = false
  // console.log(r.data);
  productNum.value = r.data.data
})
},1000)

onMounted(async function(){
  // 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('main'));
const r = await getsimpleDataRequest()
  console.log(r.data.data);
  const xArr = r.data.data.map((v)=>v.x)
  const valArr = r.data.data.map((v)=>v.val)
  // console.log(xArr);
  // console.log(valArr);
  
const option = {
  xAxis: {
    type:'category',
    data: xArr,
  },
  yAxis: {
    type:'value'
  },
  series: [
    {
      data: valArr,
      type: 'line'
    }
  ]
}

// 绘制图表
myChart.setOption(option);
})

onMounted(async function(){
  // 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('main2'));

const r = await getkDataRequest()
console.log(r.data.data);
// 绘制图表
myChart.setOption({
  tooltip: {},
  xAxis: {
    data: r.data.data.x
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'candlestick',
      data: r.data.data.val
    }
  ]
});
})
</script>

<template>
  <div>
    <el-button type="primary" :loading="userDataLoading">用户实时数量：{{ userNum }}</el-button>
    <el-button type="primary" :loading="productDataLoading">商品实时数量：{{ productNum }}</el-button>
  </div>


  <el-row>
    <el-col :span="24">
      <div id="main"></div>
    </el-col>
    <el-col :span="24">
      <div id="main2"></div>
    </el-col>
  </el-row>
</template>
<style scoped>
#main{
margin-top: 50px;
  width: 100%;
  height: 400px;
}
#main2{
  margin-top: 50px;
  width: 100%;
  height: 600px;
}
</style>
